<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app" style="border: 1px solid red; padding: 10px;">
        <h1>新闻列表</h1>
        <!-- 引入父组件 -->
        <news-list></news-list>
    </div>
    <!-- 父组件模板 -->
    <template id="news-list-template">
        <ul style="border: 1px solid blue; padding: 10px;">
            <news-item v-for="news in newsArray" :id="news.id" title="news.title" :content="news.content" @del="del">
            </news-item>
        </ul>
    </template>
    <!-- 子组件模板 -->
    <template id="news-item-template">
        <li style="border: 1px solid green; padding: 10px;">
            <span>新闻 ID: {{ id }}</span> <br />
            <span>标题： {{ title }}</span> <br />
            <span>内容： {{ content }}</span>
            <span><button @click="delMe(id)">删除</button></span>
        </li>
    </template>
    <script src="js/vue.js"></script>
    <script src="https://unpkg.com/axios@1.6.7/dist/axios.min.js"></script>
    <script>
        // 创建子组件
        const newsItem = {
            // 引用子组件模板
            template: '#news-item-template',
            // 声明子组件接收父组件传递的值
            props: ['id', 'title', 'content'],
            methods: {
                delMe(id) {
                    // 调用父组件传递的方法
                    this.$emit('del', id);
                }
            }
        }
        // 创建父组件
        const newsList = {
            // 引用父组件模板
            template: '#news-list-template',
            components: {
                // 注册子组件
                'news-item': newsItem
            },
            data() {
                return {
                    // 数据转移到 news.json 文件
                    newsArray: []
                }
            },
            created() {
                // 通常我们会在 created 中发送请求获取数据
                this.loadNewsList();
            },
            methods: {
                // 发送 axios 请求获取新闻列表
                loadNewsList() {
                    axios.get('data/news.json', {
                            params: {
                                // 传递参数
                                page: 1,
                                size: 10
                            },
                            headers: {
                                // 请求头信息
                                token: "123456abcdef"
                            }
                        })
                        .then(response => {
                            // 获取到新闻列表数据
                            this.newsArray = response.data;
                        })
                },
                del(id) {
                    // 删除指定 id 的新闻
                    const index = this.newsArray.findIndex(item => item.id === id);
                    this.newsArray.splice(index, 1);
                }
            }
        };
        // 创建 Vue 实例，并将父组件注册到 Vue 实例中
        const app = new Vue({
            el: '#app',
            components: {
                // 注册父组件
                'news-list': newsList,
            }
        })
    </script>
</body>

</html>